<template>
  <div class="about">
    <button @click="dianFun">点击</button>
    <transition name="slide-fade"
      enter-class="slide-fade-enter"
    >
        <div class="divs" :style="{width:widths}"></div>
    </transition>

    
  </div>
</template>

<script>
export default {
  data(){
    return {
      widths:'198px',
      count:0
    }
  },
  methods:{
    dianFun(){
      if (this.count === 0) {
        this.count = 1;
        this.widths = '64px';
      }else{
        this.count = 0;
        this.widths = '198px';
      }
    }
  }
}
</script>

<style lang="scss">
html,body{
  width: 100%;
  height: 100%;
}
.about{
  width: 100%;
  height: 100%;
  .divs{
    height: 100px;
    background: red;
  }
}
.slide-fade-enter{
  background: chartreuse;
  transition: all 3s linear;
}
// .slide-fade-enter-to{

// }
// .slide-fade-enter-active{

// }
// .slide-fade-leave{

// }
// .slide-fade-leave-to{

// }
// .slide-fade-leave-active{

// }
</style>
